<template>
	<div class="basic-form-vue">
		<div class="h-panel">
			<div class="h-panel-bar">
				<span class="h-panel-title">基本配置</span>
			</div>
			<div class="h-panel-body">
				<Form mode="twocolumn" :labelWidth="100">
					<FormItem label="后台Logo">
						<Upload v-model="data.logo"></Upload>
					</FormItem>
					<FormItem label="后台标题">
						<input type="text" v-model="data.name" placeholder="如:企蝶"/>
					</FormItem>
					<FormItem label="用户表单">
						<Select v-model="data.user_form_id" :datas="$global.config.forms"></Select>
					</FormItem>
					<FormItem label="样式缓存">
						<input type="text" v-model="data.cache_style" placeholder="一般设置86400秒,速度超快!"/>
					</FormItem>
					<FormItem label="数据缓存">
						<input type="text" v-model="data.cache_data" placeholder="一般设置1800秒,速度优秀!"/>
					</FormItem>
					<FormItem label="公司名称">
						<input type="text" v-model="data.company" placeholder="公司名称"/>
					</FormItem>
					<FormItem label="公司电话">
						<input type="text" v-model="data.tel" placeholder="公司电话"/>
					</FormItem>
					<FormItem label="公司地址" single>
						<textarea v-model="data.address" placeholder="公司地址"/></textarea>
					</FormItem>
					<FormItem single style="width: 100%; text-align: center;margin-top: 20px;">
						<Button color="primary" :loading="loading" @click="submit">提交</Button>
					</FormItem>
				</Form>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			data: {},
			loading: false
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData() {
			this.loading = true
			this.data = await this.$api('GET', 'config')
			this.loading = false
		},
		async submit() {
			await this.$api('POST','config',this.data)
		}
	}
}
</script>

<style lang="less">
	.basic-form-vue {
		.h-panel-body {
			padding-right: 60px;
		}
		.h-uploader-image-empty{
			height: 70px;
			width: 100%;
		}
		.h-uploader-image-container{
			width: 100%;
		}
		.h-uploader-image{
			height: 70px;
			width: 100%;
		}
		.h-input-group{
			margin:0 !important;
		}
	}
</style>